
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:积分变动记录
@author:成都市一颗优雅草科技有限公司     
@version V5.x 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   企业客服QQ:2853810243  官方客户·技术交流群 929353806交流群 929353806

 -->

<template>
	<view class="content">
		<view class="list-box">
			<view v-for="(item,index) in list" :key="index" class="item-box">
				<view class="item-row top-row">
					<view class="title">账变类型</view>
					<view class="text" style="font-weight: 300;">{{item.info}}</view>
				</view>
				<view class="item-row">
					<view class="title">数量</view>
					<view class="text">
						<text v-if="item.num>0" style="color: #1AAD19;">+{{item.num}}</text>
						<text v-else style="color: #e70000;">{{item.num}}</text>
					</view>
				</view>
				<view class="item-row">
					<view class="title">变动前</view>
					<view class="text">{{item.before_money}}</view>
				</view>
				<view class="item-row">
					<view class="title">变动后</view>
					<view class="text">{{item.after_money}}</view>
				</view>
				<view class="item-row">
					<view class="title">时间</view>
					<view class="text">{{item.created_at}}</view>
				</view>
			</view>
			<view :style="{'textAlign':'center'}" class="loading">
				<text v-if="!isMore">暂无更多数据</text>
				<text v-if="isMore">正在加载...</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				page:1,
				isMore:true,
				loadmore:false,
			}
		},
		onShow() {
			this.list = [];
			this.page = 1;
			this.isMore = true;
			this.getList();
		},
		onReachBottom() {
			if(!this.isMore) return;
			this.page++;
			this.getList();
		},
		methods: {
			getList(){
				this.$api.getChange({page:this.page}).then((res)=>{
					if(res.data.code == 0){
						this.list = this.list.concat(res.data.data);
					}else{
						this.isMore = false;
					}
				});
			}
		}
	}
</script>

<style>
.content{
	padding:0rpx;
}
.list-box{
	padding: 40rpx 0rpx;
}
.item-box{
	background: #FFFFFF;
	margin-bottom: 20rpx;
	padding: 40rpx;
}
.top-row{
	border-bottom: #F1F1F1 1px solid;
	font-weight: bold;
}
.item-box .item-row{
	display: flex;
	justify-content: space-between;
	padding: 10rpx;
}
.item-box .item-row .text{
	color: #555555;
}
</style>
